@import "variables";
@import "mixins";

// BODY TEXT
// ---------

p {
  margin: 0 0 $base-line-height / 2;
  font-size: $base-font-size;
  line-height: $base-line-height;

  small {
    font-size: $base-font-size - 2;
    color: $light-font-color;
  }
}

a {
  color: $link-color;
  text-decoration: none;
  transition-duration: 0.3s;
  transition-property: color;
}

// HEADINGS
// --------

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: normal;
  color: $font-color;
  text-rendering: optimizelegibility; // Fix the character spacing for headings

  small {
    font-weight: normal;
    color: $light-font-color;
  }
}

h1 {
  margin-bottom: 0.4em;
  font-size: 36px;
  line-height: $base-line-height * 2;

  small {
    font-size: 18px;
  }
}

h2 {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
  line-height: $base-line-height * 2;
  color: $orange;

  small {
    font-size: 18px;
  }
}

.callout h2:first-child {
  margin-top: 0;
}

h3 {
  line-height: $base-line-height * 1.5;
  font-size: 16px;
  font-weight: bold;

  small {
    font-size: 14px;
  }
}

h4,
h5,
h6 {
  line-height: $base-line-height;
}

h4 {
  font-size: 14px;
  font-weight: bold;

  small {
    font-size: 12px;
  }
}

aside h4 {
  margin-bottom: 1em;
  color: $light-font-color;
  line-height: 1.4;
}

h5 {
  font-size: 12px;
}

h6 {
  font-size: 11px;
  color: $light-font-color;
  text-transform: uppercase;
}

// LISTS
// -----

// Unordered and Ordered lists
ul,
ol {
  padding: 0;
  margin: 0 0 $base-line-height / 2 25px;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li {
  line-height: $base-line-height;
}

ul.unstyled,
ol.unstyled {
  margin-left: 0;
  list-style: none;
}

ul.bullets li {
  padding-bottom: 10px;
}

// Description Lists
dl {
  margin-bottom: $base-line-height;
}

dt,
dd {
  line-height: $base-line-height;
}

dt {
  font-weight: bold;
  line-height: $base-line-height - 1; // fix jank Helvetica Neue font bug
}

dd {
  margin-left: $base-line-height / 2;
}

// Horizontal layout (like forms)
.dl-horizontal {
  dt {
    float: left;
    width: 120px;
    clear: left;
    text-align: right;
  }

  dd {
    margin-left: 130px;
  }
}

// MISC
// ----

// Horizontal rules
hr {
  margin: $base-line-height 0;
  border: 0;
  border-top: 1px solid $base-border-color;
}

// Emphasis
strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

.muted {
  color: $light-font-color;
}

// Abbreviations and acronyms
abbr[title] {
  border-bottom: 1px dotted #ddd;
  cursor: help;
}

abbr.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

// Blockquotes
blockquote {
  padding: 0 0 0 15px;
  margin: 0 0 $base-line-height;
  border-left: 5px solid $base-border-color;

  p {
    margin-bottom: 0;
  }

  small {
    display: block;
    line-height: $base-line-height;
    color: $light-font-color;

    &:before {
      content: '\2014 \00A0';
    }
  }

  // Float right with text-align: right
  &.pull-right {
    float: right;
    padding-right: 15px;
    padding-left: 0;
    border-right: 5px solid $base-border-color;
    border-left: 0;

    p,
    small {
      text-align: right;
    }
  }
}

code {
  @include border-radius(3px);
  display: block;
  padding: 10px 15px 13px;
  margin-bottom: 1em;
  overflow: auto;
  font-family: $fixed-width-font-family;
  line-height: $fixed-width-line-height;
  font-variant-ligatures: none;
  color: $orange;
  background-color: #fff;
  border: solid 1px #efeee6;
}

// Quotes
q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
}

// Addresses
address {
  display: block;
  margin-bottom: $base-line-height;
  font-style: normal;
  line-height: $base-line-height;
}

// Tables
table {
  th {
    font-weight: bold;
  }

  &.data {
    margin-bottom: 24px;

    th,
    td {
      padding: 2px 0;
      border-bottom: solid 1px lighten($base-border-color, 10%);
    }
  }

  td.sweet {
    font-weight: bold;
    color: #25b028;
  }

  td.compare {
    font-weight: bold;
    color: $orange;
  }
}

// Misc
.light {
  color: $light-font-color;
}

small {
  font-size: 100%;
}

cite {
  font-style: normal;
}

a.subtle-button {
  display: inline-block;
  padding: 3px 20px;
  font-size: 12px;
  text-align: center;
  background-image: linear-gradient(#f1f1e9, #eae9e1);
  border-top: solid 1px #dedcd4;
  border-right: solid 1px #dedcd4;
  border-bottom: solid 1px #cdcbc4;
  border-left: solid 1px #dedcd4;
  @include border-radius(3px);
  @include box-shadow(0 1px 0 #f1f1e9);
  transition-duration: 0.3s;
  transition-property: background-image;

  &:hover {
    color: $link-color;
    background-image: linear-gradient(#edede3, #e6e5db);
  }
}

a.subtle-button.selected {
  background-image: linear-gradient(#d7d7c1, #cbc9b4);
}

a#gui-os-filter {
  display: none;
  margin-top: 15px;

  &.visible {
    display: inline-block;
  }
}

div.more {
  display: none;
}

.highlight {
  background-color: #eee0b5;
  padding: 2px;
}

.fixed {
  font-family: $fixed-width-font-family;
  font-variant-ligatures: none;
}

.text-center {
  text-align: center;
}
